<template>
	<view class="container">
		<scroll-view class="scroll-view" scroll-y="true">
			<swiper class="swiper" :circular="circular" :current="currentIndex" v-if="list[currentIndex]"
				@change="swipeChange">
				<swiper-item v-for="(m,i) in list" :key="i">
					<view class="item-height">
						<view class="header">
							<view class="type">
								{{getType(list[currentIndex]?.type)}}
							</view>
							<view class="question">
								{{list[currentIndex]?.title}}
							</view>
						</view>
						<view class="content" v-if="list[currentIndex]">
							<view class="item" v-for="(item,index) in list[currentIndex].options" :key="index"
								@tap="select(item)">

								<view v-if="list[currentIndex].type==3"
									:class="[item.checked?'letter blue':'letter',item.flag==2?'letter red':'letter',item.flag==1?'letter blue':'letter',item.flag==3?'letter blue':'letter']">
									<view class="left">
										{{item.name}}
									</view>
									<u-icon v-if="item.flag==2" name="close" color="#FF4A6D" :size="50"></u-icon>
									<u-icon v-if="item.flag==1" name="checkmark" color="#2E87FF" :size="50"></u-icon>
								</view>

								<view v-else :class="item.flag==2?'letter red':item.flag==1?'letter blue':'letter'">
									<view class="left">
										{{item.name}}
									</view>
									<u-icon v-if="item.flag==2" name="close" color="#FF4A6D" :size="50"></u-icon>
									<u-icon v-if="item.flag==1" name="checkmark" color="#2E87FF" :size="50"></u-icon>
								</view>
							</view>
						</view>
						<view class="answer-box"
							v-if="params.questionResult[currentIndex]&&params.questionResult[currentIndex].result!=0">
							<view class="box-top">
								<view class="left">
									<image src="https://q-api.lanbeiduo.com/api/file/download/PdQ4qcGJjA_金牌.png"
										class="icon"></image>
									<view class="">
										正确答案
									</view>
								</view>
								<view class="btn">
									纠错
								</view>
							</view>
							<view class="section">
								<view class="">
									答案:
								</view>
								<view class="blue">
									{{JSON.parse(list[currentIndex].answer).join(',')}}
								</view>
								<view class="" v-if="params.questionResult[currentIndex].result==2">
									您选择:
								</view>
								<view class="red" v-if="params.questionResult[currentIndex].result==2">
									{{list[currentIndex].userAnswer.join(',')}}
								</view>
							</view>
						</view>
						<view v-if="params.questionResult[currentIndex]&&params.questionResult[currentIndex].result!=0"
							class="analysis">
							<view class="top">
								<image src="https://q-api.lanbeiduo.com/api/file/download/FOpRWwKl5l_解析.png" mode=""
									class="icon">
								</image>
								<view class="title">
									题目解析
								</view>
							</view>
							<view class="text">
								{{list[currentIndex].analysis}}
							</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</scroll-view>
		<!-- <view class="box1">
			移出错题集
		</view> -->
		<view class="box2">
			<u-icon name="close-circle" color="#fff"></u-icon>
			<view class="">
				确认移出
			</view>
		</view>
		<view class="bottom" @tap="showPop">
			<view class="left">
				<view class="correct">
					<view class="icon">
						<u-icon name="checkmark" color="#fff" :size="30"></u-icon>
					</view>
					<view class="num">
						{{correctNum}}
					</view>
				</view>
				<view class="incorrect">
					<view class="icon">
						<u-icon name="close" color="#fff" :size="30"></u-icon>
					</view>
					<view class="num">
						{{inCorrectNum}}
					</view>
				</view>
				<view class="page">
					<view class="icon">
						<u-icon name="list" color="#fff" :size="30"></u-icon>
					</view>
					<view class="num">
						{{currentIndex+1}}/{{total}}
					</view>
				</view>
			</view>
			<view v-if="list[currentIndex]?.type==3" class="next" @tap.stop="next">
				下一题
			</view>
			<image v-if="list[currentIndex]?.collection" src="https://q-api.guguzi.com/api/file/download/LhOHN81HJ3_收藏 -已收藏.png" mode="" @tap.stop="collection"
				class="collect">
			</image>
			<image v-else src="https://q-api.guguzi.com/api/file/download/CSV5n3mYWX_收藏.png" mode="" @tap.stop="collection" class="collect">
			</image>
		</view>
		<u-popup :show="show" :round="10" @close="close" closeable class="popup">
			<view class="popup">
				<view class="title">
					答题卡
				</view>
				<view class="top">
					<view class="left">
						<view class="correct">
							<view class="icon">
								<u-icon name="checkmark" color="#fff" :size="30"></u-icon>
							</view>
							<view class="num">
								{{correctNum}}
							</view>
						</view>
						<view class="incorrect">
							<view class="icon">
								<u-icon name="close" color="#fff" :size="30"></u-icon>
							</view>
							<view class="num">
								{{inCorrectNum}}
							</view>
						</view>
					</view>
					<view class="right" @tap="reset">
						清空记录
					</view>
				</view>
				<view class="pop-content">
					<scroll-view scroll-y="true" class="scroll-Y">
						<view class="nums">
							<view v-for="(item,index) in total" :key="index"
								:class="params.questionResult[index]?.result==2?'num red':params.questionResult[index]?.result==1?'num blue':'num'">
								{{item}}
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted,
		unref,
		toRaw,
		toRefs,
		nextTick,
		computed
	} from 'vue'
	import {
		onInit,
		onLoad,
		onReady,
		onShow,
		onHide,
		onUnload,
		onResize,
	} from '@dcloudio/uni-app'
	import {
		$http,
		toLogin,
		getCollection
	} from "@/common"
	const currentIndex = ref(0)
	const list = ref([

	])
	let params = ref({
		questionResult: [],
		type: 1
	})
	let pageNumber = 1
	let pageSize = 10
	let total = ref(0)
	const circular = ref(false)
	const correctNum = computed(() => {
		return params.value.questionResult.filter(item => item.result == 1).length
	})
	const inCorrectNum = computed(() => {
		return params.value.questionResult.filter(item => item.result == 2).length
	})
	let listType = 0
	const today = ref(0)
	onLoad((options) => {
		listType = options.type
		const arr = ['错题集', '收藏夹', ]
		uni.setNavigationBarTitle({
			title: arr[listType]
		})
		today.value = options.params
	})
	onShow(() => {
		startTimer()
		getData(pageNumber, pageSize)
	})
	onHide(() => {

	})
	const startTime = ref(null)
	const endTime = ref(null)
	const duration = ref(0)
	const startTimer = () => {
		startTime.value = Date.now()
	}
	const stopTimer = () => {
		endTime.value = Date.now();
		duration.value = Math.round((endTime.value - startTime.value) / 1000); // 转换为秒
		console.log(`停留时间: ${duration.value}秒`, params.value.questionResult); // 输出或处理停留时间
	}
	function formatTime(seconds) {
		let timeArray = [Math.floor(seconds / 3600), Math.floor((seconds % 3600) / 60), seconds % 60];
		let formattedTime = timeArray.map(time => (time < 10 ? '0' + time : time));
		return formattedTime.join(':');
	}
	onUnload(() => {
		let param = {
			questionResult: params.value.questionResult.filter(item => item.result != 0),
			type: 1
		}
		if (param.questionResult.length > 0) { //答了题才发请求
			stopTimer()
			let arr1 = params.value.questionResult.filter(item => item.result != 0) //回答的题目
			let arr2 = params.value.questionResult.filter(item => item.result == 1) //答对的题目
			let lists = JSON.parse(JSON.stringify(list.value))
			let info = {
				num: arr1.length,
				duration: formatTime(duration.value),
				unit: Math.ceil(duration.value / arr1.length),
				rate: Math.ceil(arr2.length / arr1.length * 100),
				errors: lists.filter(item => item.result == 2)
			}
			$http.post("questionSubmit", param).then(res => {
				info = {
					...info,
					...res
				}
				uni.redirectTo({
					url: "/pages/home/result2?info=" + JSON.stringify(info)
				})
			})
		} else {
			uni.navigateBack()
		}
	})

	function getData(pageNumber, pageSize) {
		let arr = [{
				name: "questionLog",
				params: {
					result: 2,
					type: 1
				}
			},
			{
				name: "userCollection",
				params: {

				}
			}
		]
		$http.get(arr[listType].name, {
			pageNumber: pageNumber,
			pageSize: pageSize,
			...arr[listType].params
		}).then(res => {
			console.log(res, 'ddd')
			total.value = listType == 0 ? res.total : res?.length
			let collections = []
			if(uni.getStorageSync('collections')){
				collections = JSON.parse(uni.getStorageSync('collections'))
			}
			if (res.data && listType == 0) {
				res.data.forEach(item => {
					if(collections.length>0){
						if(collections.includes(item.id)){
							item.collection = true
						}else{
							item.collection = false
						}
					}
					params.value.questionResult.push({
						questionId: item.id,
						result: 0
					})
					item.options = JSON.parse(item.options).map(m => {
						return {
							name: m,
							checked: false
						}
					})
				})
				list.value = list.value.concat(res.data)
			}
			if (res && listType == 1) {
				res.forEach(item => {
					if(collections.length>0){
						if(collections.includes(item.id)){
							item.collection = true
						}else{
							item.collection = false
						}
					}
					params.value.questionResult.push({
						questionId: item.id,
						result: 0
					})
					item.options = JSON.parse(item.options).map(m => {
						return {
							name: m,
							checked: false
						}
					})
				})
				list.value = list.value.concat(res)
			}
			console.log(list.value, 'list.value')
		})
	}

	function getType(val) {
		const arr = ['', '单选题', '判断题', '多选题']
		return arr[val]
	}

	function select(item) {
		console.log(list.value[currentIndex.value].options, JSON.parse(list.value[currentIndex.value].answer), 'item')
		if (params.value.questionResult[currentIndex.value].result != 0 && list.value[currentIndex.value].type != 3) {
			return
		}
		if (list.value[currentIndex.value].type != 3) { //多选
			if (JSON.parse(list.value[currentIndex.value].answer)[0] == item.name.split(' ')[0]) {
				params.value.questionResult[currentIndex.value].result = 1
				item.flag = 1
				list.value[currentIndex.value].userAnswer = [item.name.split(' ')[0]]
				list.value[currentIndex.value].options.forEach(m => {
					m.checked = false
				})
				item.checked = !item.checked
				console.log(currentIndex.value, 'xxx')
				currentIndex.value + 1 < total.value && currentIndex.value++
			} else {
				item.flag = 2
				params.value.questionResult[currentIndex.value].result = 2
				list.value[currentIndex.value].options.forEach(m => {
					if (JSON.parse(list.value[currentIndex.value].answer)[0] == m.name.split(' ')[0]) {
						m.flag = 1
						list.value[currentIndex.value].userAnswer = [item.name.split(' ')[0]]
					}
					m.checked = false
				})
				item.checked = !item.checked
			}

			if (list.value.length - currentIndex.value < 3) {
				pageNumber++
				getData(pageNumber, pageSize)
			}
		} else {
			item.checked = !item.checked
			let res = list.value[currentIndex.value].options.filter(m => m.checked).map(n => {
				return n.name.split(' ')[0]
			})
			console.log(res, 'res') //用户选择的结果集合
			list.value[currentIndex.value].userAnswer = res
		}
		console.log(params.value, 'bbbbb')
	}

	function arraysContainSameElements(arr1, arr2) {
		return new Set(arr1).size === new Set(arr2).size &&
			new Set([...arr1, ...arr2]).size === new Set(arr1).size;
	}
	const refresh = ref(true)
	let isEnd = false

	function prev() {
		if (currentIndex.value == 0) {
			return
		}
		currentIndex.value--
	}

	function next() {
		let arr1 = list.value[currentIndex.value].userAnswer
		if (arr1 && arr1.length > 0) {
			let arr2 = JSON.parse(list.value[currentIndex.value].answer)
			let arr3 = arr1.filter(item => !arr2.includes(item))
			let arr4 = arr1.filter(item => arr2.includes(item))
			let arr5 = arr2.filter(item => !arr1.includes(item))
			console.log(arr3, arr4, 'arr3arr4', list.value[currentIndex.value].options);
			list.value[currentIndex.value].options.forEach(item => {
				if (arr3.length && arr3.includes(item.name.split(' ')[0])) {
					item.flag = 2
				}
				if (arr4.length && arr4.includes(item.name.split(' ')[0])) {
					item.flag = 1
				}
				if (arr5.length && arr5.includes(item.name.split(' ')[0])) {
					item.flag = 3
				}
			})
			if (arr1.length == 0) {
				params.value.questionResult[currentIndex.value].result = 0
			} else {
				params.value.questionResult[currentIndex.value].result = arraysContainSameElements(arr1, arr2) ? 1 : 2
			}
			if (list.value.length - currentIndex.value < 4) {
				pageNumber++
				getData(pageNumber, pageSize)
			}
			setTimeout(() => {
				currentIndex.value + 1 < total.value && currentIndex.value++
			}, 1000)
		} else {
			currentIndex.value + 1 < total.value && currentIndex.value++
		}
	}

	function swipeChange(e) {
		console.log(e.detail, 'detail')
		currentIndex.value = e.detail.current
		if (list.value.length - currentIndex.value < 4) {
			pageNumber++
			getData(pageNumber, pageSize)
		}
	}

	function reset() {
		uni.showModal({
			title: '提示',
			content: '您确定要清空当前做题记录并重新开始吗?',
			success: function(res) {
				if (res.confirm) {
					currentIndex.value = 0
					pageNumber = 1
					total.value = 0
					list.value = []
					params.value = {
						questionResult: [],
						type: 1
					}
					show.value = false
					getData(pageNumber, pageSize)
				} else if (res.cancel) {
					console.log('用户点击取消');
				}
			}
		})
	}
	const show = ref(false)

	function close() {
		show.value = false
	}

	function showPop() {
		show.value = true
	}

	function submit() {
		console.log(params.value, 'bbbb')
		if (params.value.questionResult[currentIndex.value].result == 0) {
			uni.showToast({
				title: '请选择答案!',
				icon: 'none'
			})
			return
		}
		$http.post("questionSubmit", params.value).then(res => {
			console.log(res, 'dre')
			uni.showToast({
				title: '提交成功!',
				icon: 'none'
			})
			setTimeout(() => {
				uni.navigateBack()
			}, 1000)
		})
	}
	function collection() {
		$http.post("collection", {
			isLast: true,
			id: list.value[currentIndex.value].id
		}).then(res => {
			uni.showToast({
				title: res == 1 ? '收藏成功!' : '已取消!',
				icon: 'none'
			})
			list.value[currentIndex.value].collection = !list.value[currentIndex.value].collection
			getCollection()
		})
	}
</script>

<style lang="scss" scoped>
	.container {
		height: 100%;
		background-color: #F9F9F9;

		.scroll-view {
			height: calc(100vh - 130rpx);
		}

		.item-height {
			height: calc(100vh - 160rpx);
			overflow-y: scroll;
		}

		.swiper {
			height: 100%;
			padding: 30rpx;
			box-sizing: border-box;
		}

		.header {
			padding: 20rpx 10rpx;
			display: flex;

			.type {
				width: 90rpx;
				height: 40rpx;
				font-size: 22rpx;
				font-weight: bold;
				background-color: #E5EDFA;
				color: #2E87FF;
				border-top-right-radius: 10rpx;
				border-top-left-radius: 10rpx;
				border-bottom-right-radius: 10rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-right: 16rpx;
			}

			.question {
				flex: 1;
			}
		}

		.content {
			padding: 20rpx;

			.item {
				margin-bottom: 28rpx;

				.letter {
					background-color: #fff;
					border-radius: 20rpx;
					padding: 10rpx 20rpx;
					min-height: 80rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
				}

				.checkbox {
					background-color: #fff;
					border-radius: 20rpx;
					padding: 20rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
				}

				.red {
					background-color: #F8E3E8 !important;
					color: #FF4A6D !important;
				}

				.blue {
					background-color: #E5EDFA;
					color: #2E87FF;
				}

				.text {
					flex: 1;
					margin-top: 6rpx;
				}
			}
		}

		.answer-box {
			padding: 26rpx 20rpx;
			background-color: #fff;
			margin-bottom: 20rpx;

			.box-top {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.left {
					display: flex;
					align-items: center;

					.icon {
						width: 50rpx;
						height: 50rpx;
					}

					view {
						font-size: 32rpx;
						font-weight: bold;
					}
				}

				.btn {
					width: 100rpx;
					height: 50rpx;
					border-radius: 25rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					background-color: #F8F9FB;
					color: #778899;
				}
			}

			.section {
				display: flex;
				align-items: center;
				margin-top: 20rpx;
				padding-left: 4rpx;

				.blue {
					margin: 0 16rpx;
				}

				.red {
					margin: 0 16rpx;
				}
			}
		}

		.analysis {
			background-color: #fff;
			padding: 20rpx;

			.top {
				display: flex;
				align-items: center;
				margin-bottom: 10rpx;

				.icon {
					width: 50rpx;
					height: 50rpx;
				}

				.title {
					font-weight: bold;
					font-size: 32rpx;
				}
			}

			.text {
				line-height: 1.6;
				text-align: justify;
				padding-bottom: 10rpx;
			}
		}

		.box1 {
			position: fixed;
			bottom: 160rpx;
			left: 50%;
			transform: translateX(-50%);
			width: 150rpx;
			height: 60rpx;
			border-radius: 30rpx;
			color: #F22341;
			display: flex;
			justify-content: center;
			align-items: center;
			box-shadow: 0px 0px 12px rgba(0, 0, 0, .12);
			font-size: 22rpx;
		}

		.box2 {
			position: fixed;
			bottom: 160rpx;
			left: 50%;
			transform: translateX(-50%);
			display: flex;
			justify-content: center;
			align-items: center;
			width: 170rpx;
			height: 60rpx;
			border-radius: 30rpx;
			background-color: #F22341;
			color: #fff;

			view {
				font-size: 22rpx;
				margin-left: 8rpx;
			}
		}

		.bottom {
			position: fixed;
			bottom: 0;
			width: 100%;
			height: 130rpx;
			background-color: #fff;
			display: flex;
			padding: 20rpx 40rpx;
			justify-content: space-between;
			align-items: center;

			.left {
				display: flex;
				align-items: center;

				.correct {
					display: flex;
					align-items: center;

					.icon {
						width: 40rpx;
						height: 40rpx;
						border-radius: 12rpx;
						background-color: #4082FC;
						display: flex;
						justify-content: center;
						align-items: center;
						margin-right: 6rpx;
					}
				}

				.incorrect {
					display: flex;
					align-items: center;
					margin: 0 60rpx 0 30rpx;

					.icon {
						width: 40rpx;
						height: 40rpx;
						border-radius: 12rpx;
						background-color: #F22341;
						display: flex;
						justify-content: center;
						align-items: center;
						margin-right: 6rpx;
					}
				}

				.btn1 {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 140rpx;
					height: 50rpx;
					background-color: #1867E8;
					color: #fff;
					margin: 0 10rpx;
					border-radius: 10rpx;
				}

				.btn2 {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 140rpx;
					height: 50rpx;
					background-color: #1867E8;
					color: #fff;

					border-radius: 10rpx;
				}

				.page {
					display: flex;
					align-items: center;

					.icon {
						width: 40rpx;
						height: 40rpx;
						border-radius: 12rpx;
						background-color: #C1C6CC;
						display: flex;
						justify-content: center;
						align-items: center;
						margin-right: 6rpx;
					}

					.num {
						font-size: 26rpx;
					}
				}
			}

			.next {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 160rpx;
				height: 60rpx;
				background-color: #1867E8;
				color: #fff;
				border-radius: 10rpx;
			}

			.right {
				display: flex;
				align-items: center;

				.btn {
					width: 240rpx;
					height: 70rpx;
					border-radius: 10rpx;
					font-weight: bold;
					display: flex;
					justify-content: center;
					align-items: center;
					background-color: #1667EA;
					color: #fff;

				}
			}

			.collect {
				width: 40rpx;
				height: 40rpx;
			}
		}


		.popup {
			padding: 20rpx 0;

			.title {
				padding: 0rpx 20rpx;
				font-weight: bold;
				font-size: 34rpx;
				text-align: center;
			}

			.top {
				padding: 0rpx 40rpx;
				display: flex;
				justify-content: space-between;
				margin: 20rpx 0 30rpx 0;

				.left {
					display: flex;
					align-items: center;

					.correct {
						display: flex;
						align-items: center;

						.icon {
							width: 40rpx;
							height: 40rpx;
							border-radius: 12rpx;
							background-color: #4082FC;
							display: flex;
							justify-content: center;
							align-items: center;
							margin-right: 6rpx;
						}
					}

					.incorrect {
						display: flex;
						align-items: center;
						margin: 0 40rpx 0 20rpx;

						.icon {
							width: 40rpx;
							height: 40rpx;
							border-radius: 12rpx;
							background-color: #F22341;
							display: flex;
							justify-content: center;
							align-items: center;
							margin-right: 6rpx;
						}
					}
				}

				.right {
					background-color: #F8F9FB;
					width: 160rpx;
					height: 54rpx;
					border-radius: 28rpx;
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}

			.pop-content {
				padding: 0rpx 10rpx;

				.scroll-Y {
					height: 800rpx;

					.nums {
						display: flex;
						flex-wrap: wrap;

						.num {
							width: 100rpx;
							height: 100rpx;
							margin: 16rpx 10rpx;
							border-radius: 50%;
							background-color: #F8F9FB;
							display: flex;
							justify-content: center;
							align-items: center;
						}

						.red {
							background-color: #F8E3E8;
							color: #FF4A6D;
						}

						.blue {
							background-color: #E5EDFA;
							color: #2E87FF;
						}
					}
				}
			}
		}
	}
</style>